<!--
  店铺信息统计缩略图组件测试页面
  @author Wu.Liang
  @date 2025-01-30
-->
<template>
  <div class="test-container">
    <h2>店铺信息统计缩略图组件测试</h2>
    
    <!-- 基础用法 -->
    <div class="test-section">
      <h3>基础用法</h3>
      <ShopStatsPanel 
        :shop-id="1"
        :show-refresh="true"
        :show-view-more="true"
        @refresh="handleRefresh"
        @view-more="handleViewMore"
      />
    </div>
    
    <!-- 不显示按钮 -->
    <div class="test-section">
      <h3>不显示按钮</h3>
      <ShopStatsPanel 
        :shop-id="2"
        :show-refresh="false"
        :show-view-more="false"
      />
    </div>
    
    <!-- 无店铺ID -->
    <div class="test-section">
      <h3>无店铺ID</h3>
      <ShopStatsPanel 
        :show-refresh="true"
        :show-view-more="true"
        @refresh="handleRefresh"
        @view-more="handleViewMore"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ShopStatsPanel from './ShopStatsPanel.vue'

// 处理刷新事件
const handleRefresh = () => {
  console.log('测试：刷新店铺统计数据')
}

// 处理查看更多事件
const handleViewMore = () => {
  console.log('测试：查看店铺统计详情')
}
</script>

<style scoped>
.test-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 30px;
}

.test-section h3 {
  margin-bottom: 15px;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}
</style>
